<template>
  <div class="fault-page">
    <Navbar :bg="navBg" :title="navTitle" />
    <template v-if="isFault">
      <div class="content">
        <ErrorDialogs :info="errInfo" />
      </div>
    </template>
    <template v-else>
      <div class="no-error">
        <img src="@/assets/images/error.png" />
        <div>暂无故障</div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import Navbar from '@/components/Navbar.vue'
import ErrorDialogs from '@/components/ErrorDialogs.vue'
import { faultFilter } from '@/utils/filter.ts'
import { useStore } from 'vuex'
const store = useStore()

const navBg = ref('#fff')
const navTitle = ref('故障提醒')
const isFault = ref(false)
const errInfo = ref({})

// 初始化数据
const init = () => {
  console.log('init==')
  const info = store.state.deviceInfo
  isFault.value = info.fault > 0 ? true : false
  if (info.fault > 0) {
    errInfo.value = faultFilter(info.fault)
  }
}
init()
watch(
  () => store.state,
  val => {
    console.log('store数据变化了==', val)
    const { deviceInfo } = val
    if (deviceInfo) {
      init()
    }
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
@import url(../assets/style/control.less);
</style>
